<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- Declare a new AngularJS app and associate the controller -->
<form ng-app ng-controller="OrderFormController">

	<h1>Services</h1>

	<ul>
		<!-- Loop through the services array, assign a click handler, and set or
			remove the "active" css class if needed -->
		<li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}">
			<!-- Notice the use of the currency filter, it will format the price -->
			{{service.name}} <span>{{service.price | currency}}</span>
		</li>
	</ul>

	<div class="total">
		<!-- Calculate the total price of all chosen services. Format it as currency. -->
		Total: <span>{{total() | currency}}</span>
	</div>

</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
	function OrderFormController($scope){

	// Define the model properties. The view will loop
	// through the services array and genreate a li
	// element for every one of its items.

	$scope.services = [
		{
			name: 'Web Development',
			price: 300,
			active:true
		},{
			name: 'Design',
			price: 400,
			active:false
		},{
			name: 'Integration',
			price: 250,
			active:false
		},{
			name: 'Training',
			price: 220,
			active:false
		}
	];

	$scope.toggleActive = function(s){
		s.active = !s.active;
	};

	// Helper method for calculating the total price

	$scope.total = function(){

		var total = 0;

		// Use the angular forEach helper method to
		// loop through the services array:

		angular.forEach($scope.services, function(s){
			if (s.active){
				total+= s.price;
			}
		});

		return total;
	};
}
</script>
</body>
</html>
